$primary-color: #248ACC;
/* Wave */
@mixin transform($transform) {
    -webkit-transform: $transform;
    -ms-transform: $transform;
    transform: $transform;
}

@mixin animation($animation) {
    -webkit-animation: $animation;
    animation: $animation;
}

.pl-loading {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    left: 50%;
    margin-left: 40px;
    .loader {
        position: relative;
        width: 100px;
        height: 60px;

        span,
        &:before,
        &:after {
            position: absolute;
            display: block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            opacity: 0.2;
            background: $primary-color;
        }

        span {
            top: 50%;
            left: 50%;
            @include transform(translate(-50%, -50%));
            @include animation(lightUp 1.5s linear infinite 0.5s);
        }

        &:before,
        &:after {
            content: "";
        }

        &:before {
            top: 50%;
            left: 0;
            @include transform(translate(0, -50%));
            @include animation(lightUp 1.5s linear infinite);
        }

        &:after {
            top: 50%;
            right: 0;
            @include transform(translate(0, -50%));
            @include animation(lightUp 1.5s linear infinite 1s);
        }
    }
}

.hideNav{
    .pl-loading{
        margin-left: -21px;
    }
}

@keyframes lightUp {
    0% {
        opacity: 0.2;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.2;
    }
}